
<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<title></title> 
<style type="text/css"> 
*{ margin:0; padding:0;} 
body{border:1px solid #066} 
.b{ width:1000px; height:77px} 
.b div{width:98px; height:75px; word-wrap:break-word; word-break:break-all; float:left; border:1px solid #096;  overflow:scroll} 
</style> 
</head> 
<body leftmargin="4" rightmargin="4" onswipe="g('dbg1').innerHTML='swipe b'" onswipeleft="g('dbg2').innerHTML='left b'" onswiperight="g('dbg2').innerHTML='right b'">
<div style="height:500px;"></div> 
swipe swipeleft swiperight 
<div id="div1" style="width:300px; overflow:hidden; height:77px; margin:0 auto" onswipe="g('dbg1').innerHTML='swipe'" onswipeleft="g('dbg2').innerHTML='left'" onswiperight="g('dbg2').innerHTML='right'"> 
    <div style="word-break:break-all" class="b"> 
        <div id="dbg1"> 1</div> 
        <div id="dbg2"> 2</div> 
        <div id="dbg3"> 3</div> 
        <div id="dbg4"> 4</div> 
        <div id="dbg5"> 5</div> 
        <div id="dbg6"> 6</div> 
        <div> 7</div> 
        <div> 8</div> 
        <div> 9</div> 
        <div> 0</div> 
    </div> 
</div> 
<div id="dbg">dbg</div> 
<div style="height:500px;"></div> 
<script language="javascript"> 
function printEvent(evt) 
{ 
    try 
    { 
        var tmp = ''; 
        for(var i in evt) 
        { 
            tmp += i+':' 
            var v = evt[i]+''; 
            if(v=='[object HTMLDivElement]') 
            { 
                tmp+=' <b>div</b> - '+evt[i].id+'<br/>'; 
            } 
            else if(''+(evt[i])=='[object TouchList]') 
            { 
                tmp+=' <br/>    <b>touchlist</b>:<div style="border:1px solid red; margin:1px"> '; 
                for(var x in evt[i]) 
                { 
                    if(''+(evt[i][x])=='[object Touch]') 
                    { 
                        tmp+='<br>    ----'+x+':'+' <b>Touch</b><br/><div style="border:1px solid blue;margin:1px">'; 
                        for(var y in evt[i][x]) 
                        { 
                            if(evt[i][x][y]=='[object HTMLDivElement]') 
                            { 
                                tmp+='    ----'+y+':<b>div</b> - '+evt[i][x][y].id+'<br/>'; 
                            }else tmp+='<br>    ----'+y+':'+evt[i][x][y]+'<br/>'; 
                        } 
                        tmp+='</div>'; 
                    }else 
                        tmp+='<br>     '+x+':'+evt[i][x]+'<br/>'; 
                } 
                tmp+='</div>'; 
            }else if(typeof(evt[i])=='number'){              
                tmp+='<font color="green">'+v+'</font><br/>'; 
            }            
            else tmp+=''+v+'<br/>'; 
        } 
        return tmp; 
    }catch(e){ 
        alert(e) 
    } 
} 
 
function g(id) 
{ 
    return document.getElementById(id); 
} 
var swiping = false; 
var step = 16; 
function slowmv(pid,v,v1) 
{ 
    try{ 
        var moved = arguments.length==4?arguments[3]:0; 
        if(moved+step>v) 
            var _step = v-moved; 
        else 
            var _step = step; 
     
        moved+=_step; 
        var obj = g(pid); 
        var display_width = obj.style.width?parseInt(obj.style.width,10):0; 
         
        var new_left = obj.scrollLeft+_step*v1; 
        if((v1>0&&new_left+display_width>=obj.scrollWidth)||(v1<0&&new_left<=0)) new_left = new_left<=0?0:(obj.scrollWidth-display_width); 
        obj.scrollLeft = new_left; 
         
        if(moved<v) 
        { 
            if(new_left>=obj.scrollWidth-display_width||new_left<=0){ 
                swiping = false; 
                return; 
            } 
            setTimeout(function(){slowmv(pid,v,v1,moved);},25) 
        }else swiping = false; 
         
        g('dbg').innerHTML  = g('dbg').innerHTML + '<br>new_left=' +new_left+',pid='+pid+',scrollWidth='+obj.scrollWidth; 
        g('dbg').innerHTML  = g('dbg').innerHTML + ','+ screen.availWidth+','+screen.width; 
    }catch(e){ 
        alert('slowmv error='+e+',pid='+pid+',v='+v+',v1='+v1); 
    } 
} 
function swipe(pid,dir,xydiff) 
{ 
    if(swiping) return; 
    swiping = true; 
    try{ 
        var obj = g(pid); 
        g('dbg').innerHTML  = g('dbg').innerHTML + ',dir = ' +dir 
        if(dir=='left') 
            slowmv(pid,obj.style.width?parseInt(obj.style.width,10):300,1); 
        else 
            slowmv(pid,obj.style.width?parseInt(obj.style.width,10):300,-1);             
    }catch(e){ 
        alert(e) 
    } 
} 
 
function touch(obj,func) 
{ 
    this.swipe_function[obj.id] = func; 
    obj.data = this; 
    this.bind(obj,'touchstart',function(e){this.data.touchstart(e);}); 
    this.bind(obj,'touchend',function(e){this.data.touchend(e);}); 
    this.bind(obj,'touchmove',function(e){this.data.touchmove(e);}); 
} 
touch.prototype.tch_start = {}; 
touch.prototype.tch_mv = {}; 
touch.prototype.swipe_function = {}; 
touch.prototype.bind = function(obj,evt,fun) 
{ 
    if(typeof obj.attachEvent != 'undefined') 
    { 
        obj.attachEvent('on'+evt,fun); 
    }else{ 
        obj.addEventListener(evt,fun,true); 
    } 
} 
touch.prototype.touchstart=function(evt) 
{ 
    try{ 
        var tch = evt['touches'][0]; 
        this.tch_start[tch.target.id] = [tch.clientX,tch.clientY]; 
        g('dbg').innerHTML = tch.target.id+' (start) : '+ this.tch_start[tch.target.id]; 
    }catch(e){ 
        alert('this.tch_start='+this.tch_start+'<br />'+e); 
    } 
} 
touch.prototype.touchend=function (evt) 
{ 
    try{ 
        var id = evt.changedTouches[0].target.id; 
        var pid = evt.currentTarget.id; 
        var now = this.tch_mv[id]; 
        var start = this.tch_start[id]; 
        var xdiff = now[0]-start[0]; 
        var ydiff = now[1]-start[1]; 
         
        var f = this.swipe_function[pid]; 
        if(xdiff<-20) 
        { 
            f(pid,'left',xdiff); 
            return; 
        } 
         
        if(xdiff>20) 
        { 
            f(pid,'right',xdiff); 
            return; 
        } 
         
        if(ydiff<-20) 
        { 
            f(pid,'up',ydiff); 
            return; 
        } 
         
        if(xdiff>20) 
        { 
            f(pid,'down',ydiff); 
            return; 
        }    
    }catch(e){ 
        alert('touchend error='+e) 
    } 
} 
 
touch.prototype.touchmove=function(evt) 
{ 
    try{ 
        var tch = evt['touches'][0]; 
        var now = [tch.clientX,tch.clientY]; 
        var id  = tch.target.id; 
        this.tch_mv[id] = now; 
        g('dbg').innerHTML = id+' (mv) : '+ now; 
    }catch(e){ 
        alert('touchmove error='+e) 
    } 
} 
 
var t = new touch(g('div1'),swipe); 
 
</script> 
</body> 
</html> 